<template>
  <div>
    <!-- <Tabber></Tabber> -->
    <!-- home -->
    <div class="home">
      <!-- banner -->
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">
          <van-swipe-item v-for="(banner,index) in banners" :key="index">
            <a :href="banner.link_url">
              <div class="imgs">
                <h2>{{banner.main_title}}</h2>
                <h3>{{banner.sub_title}}</h3>
                <h4>{{banner.description}}</h4>
                <img :src="banner.main_image" alt />
              </div>
            </a>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              <span :class="{spanActive:isPag}"></span>
              <span :class="{spanActive:!isPag}"></span>
            </div>
          </template>
        </van-swipe>
      </div>
      <!-- content -->
      <div class="content">
        <a class="con" v-for="(con,index) in content" :key="index" :href="con.go_url">
          <div class="conTitle">
            <h2>{{con.main_title}}</h2>
            <h3>{{con.sub_title}}</h3>
          </div>
          <div class="conMain">
            <div class="conMain1">
              <img :src="con.products[0].picUrl" alt />
              <h4>{{con.products[0].tag}}</h4>
            </div>
            <div class="conMain2">
              <img :src="con.products[1].picUrl" alt />
              <h4>{{con.products[1].tag}}</h4>
            </div>
          </div>
        </a>
      </div>
      <!-- today -->
      <div class="today">
        <div class="imgTitle">
          <img
            src=""
            alt
          />
        </div>
        <ul>
          <router-link
            v-for="data in today"
            :key="data.enentId"
            :to="{
              name:'ProductList',
              query:{id:data.categoryId},
            }"
            tag="li"
          >
            <div class="imgMain">
              <h2>{{data.englishName}}</h2>
              <h3>{{data.chineseName}}</h3>
              <h4>{{data.discountText}}</h4>
            </div>
            <img :src="data.imageUrl" alt />
          </router-link>
        </ul>
      </div>
      <!-- hot -->
      <div class="hot">
        <div class="imgTitle">
          <img
            src=""
            alt
          />
        </div>
        <ul>
          <router-link
            v-for="data in hot"
            :key="data.enentId"
            :to="{
              name:'ProductList',
              query:{id:data.categoryId},
            }"
            tag="li"
          >
            <div class="imgMain">
              <h2>{{data.englishName}}</h2>
              <h3>{{data.chineseName}}</h3>
              <h4>{{data.discountText}}</h4>
            </div>
            <img :src="data.imageUrl" alt />
          </router-link>
        </ul>
      </div>
      <!-- more -->
      <div class="more">
        <div class="imgTitle">
          <img
            src=""
            alt
          />
        </div>
        <ul>
          <li>
            <a href ="http://www.mei.com/brandwall">
              <img src="https://cdn12.mei.com/h5_vue/static/img/pinpai.f883e27.jpg" alt />
            </a>
          </li>
          <li>
            <a  @click=" handleClick('/silo/upcoming')">
              <img src="https://cdn12.mei.com/h5_vue/static/img/jjsx.66a0743.jpg" alt />
            </a>
          </li>
        </ul>
      </div>
      <!-- foot -->
      <div class="foot">
        <h2>400 - 664 - 6698</h2>
        <ul>
          <li>首页</li>
          <li>|</li>
          <li>
            <a
              href="https://apps.apple.com/cn/app/id510289916?spm=a2o1p.9077418.0.0.4bf24cabGjYijW"
            >客户端</a>
          </li>
          <li>|</li>
          <li @click="handleClick('/login')">登录</li>
          <li>|</li>
          <li @click="handleClick('/reg')">注册</li>
        </ul>
        <h2>浙ICP备16004860号-1</h2>
      </div>
    </div>


  </div>
</template>

<script>
// import Tabbar from "@/components/Tabbar";
import {mapMutations} from "vuex"
import axios from "axios";

export default {
  components: {
    // Tabber,
  },
  data() {
    return {
      banners: "",
      content: "",
      today: "",
      hot: "",
      isPag: true
    };
  },
  methods: {
     ...mapMutations("product",["setDataList"]),
        ...mapMutations("tabbar",["show","hide","homeTrue","homeFalse","upcomingTrue","upcomingFalse"]),
    handleClick(path) {
       if(path==='/index'){
        if(this.home === true){

        }else{
          this.homeTrue()
          this.upcomingFalse()
        }
      }
      this.$router.push(path);
    },
    onChange() {
      this.isPag = !this.isPag;
    }
  },
  computed: {
    select() {

      return 1;
    }
  },
  created() {
    //banners
     this.setDataList([])
    axios
      .get(
        "http://www.mei.com/appapi/home/mktBannerApp/v3?silo_id=2013000100000000008&platform_code=PLATEFORM_H5"
      )
      .then(res => {
        this.banners = res.data.banners;
      });
    //content
    axios
      .get("http://www.mei.com/appapi/ninenew/operational/v1?credential=")
      .then(res => {
        this.content = res.data.show2;
      });
    //today  hot
    axios
      .get(
        "http://www.mei.com/appapi/home/eventForH5?params=%7B%7D&timestamp=1586397861843&summary=c5dab68d97ed01c8e9d896a65b2fcea1&platform_code=H5"
      )
      .then(res => {
        this.today = res.data.lists[0].events;
        this.hot = res.data.lists[1].events;
      });
  },
  //content

  mounted() {
    this.show();
  },
  beforeDestroy() {
    this.hide();
  }
};
</script>

<style  lang="scss" scoped>
body {
  overflow-x: hidden;
}
// home
.home {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  overflow-y: scroll;
  // banner
  .banner {
    background: rgb(177, 174, 174);
    overflow-x: hidden;
    width: 3.75rem;
    height: 4.5rem;
    overflow: hidden;
    .custom-indicator {
      width: 100%;
      position: absolute;
      right: 0;
      bottom: 0.4rem;
      text-align: center;
      span {
        width: 0.05rem;
        height: 0.05rem;
        background: rgb(173, 170, 170);
        display: inline-block;
        margin-right: 0.05rem;
      }
      .spanActive {
        width: 0.15rem;
        background: #fff;
      }
    }
    .imgs {
      color: #fff;
      position: relative;
      text-align: center;
      h2 {
        width: 100%;
        position: absolute;
        bottom: 1rem;
        font-size: 0.26rem;
        font-weight: 700;
      }
      h3 {
        width: 100%;
        position: absolute;
        bottom: 0.8rem;
        font-size: 0.14rem;
      }
      h4 {
        display: block;
        position: absolute;
        bottom: 0.6rem;
        color: #fff;
        width: 100%;
        font-size: 0.14rem;
      }
      img {
        width: 3.75rem;
        height: 4.5rem;
      }
    }
  }
  //content
  .content {
    display: flex;
    padding: 0.2rem 0.15rem 0 0.15rem;
    justify-content: space-between;
    a {
      padding: 0.1rem 0.08rem;
      width: 1.71rem;
      height: 1.6rem;
      background: #eee;
      &:nth-child(2) {
        h4 {
          background: red;
          border: none;
          color: #fff;
        }
      }
      .conTitle {
        display: flex;
        align-items: center;
        margin-bottom: 0.08rem;
        h2 {
          font-size: 0.426667rem;
          color: #111;
          font-size: 0.16rem;
          font-weight: 900;
          margin-right: 0.05rem;
        }
        h3 {
          font-size: 0.12rem;
          font-weight: 900;
          color: #666;
        }
      }
      .conMain {
        display: flex;
        justify-content: space-between;
        h4 {
          text-align: center;
          margin-top: 0.04rem;
          border: 1px solid;
        }
      }
      img {
        width: 0.7rem;
        height: 0.9rem;
      }
    }
  }
  //today hot
  .today,
  .hot {
    padding: 0 0.15rem;
    .imgTitle {
      width: 1.3rem;
      height: 0.2rem;
      margin: 0.3rem 0;
      img {
        width: 100%;
      }
    }
    ul {
      li {
        width: 3.45rem;
        height: 2.07rem;
        margin-bottom: 0.1rem;
        position: relative;
        .imgMain {
          color: #fff;
          position: absolute;
          left: 0.1rem;
          bottom: 0.1rem;
          h2 {
            font-size: 0.16rem;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  //more
  .more {
    padding: 0 0.15rem;
    .imgTitle {
      width: 1.73rem;
      height: 0.2rem;
      margin: 0.3rem 0;
      img {
        width: 100%;
      }
    }
    ul {
      display: flex;
      justify-content: space-between;
      li {
        width: 1.7rem;
        img {
          width: 100%;
        }
      }
    }
  }
  //foot
  .foot {
    padding: 0 0.15rem 0.3rem;
    font-size: 0.12rem;
    h2 {
      text-align: center;
      font-size: 0.13rem;
      margin: 0.2rem 0 0.18rem;
    }
    ul {
      display: flex;
      justify-content: space-between;
      padding: 0 0.7rem;
    }
  }
}
//main

//upcoming
</style>
